import { CSSProperties } from 'react';

interface LoadingSpinnerProps {
  size?: number;
  color?: string;
  className?: string;
  style?: CSSProperties;
}

export default function LoadingSpinner({
  size = 40,
  color = '#3b82f6',
  className = '',
  style
}: LoadingSpinnerProps) {
  const spinnerStyle: CSSProperties = {
    width: size,
    height: size,
    border: `${Math.floor(size / 10)}px solid #e5e7eb`,
    borderTopColor: color,
    borderRadius: '50%',
    animation: 'spin 1s linear infinite',
    ...style
  };

  return (
    <div 
      className={`loading-spinner ${className}`}
      role="status"
      aria-label="Loading"
    >
      <div style={spinnerStyle} />
      <span className="sr-only">Loading...</span>
    </div>
  );
}